<template>
  <div class="integral">
    <a-card title="用户点券设置" style="width: 100%">
      <div slot="extra">
        <a-input-search
          placeholder="请输入手机号搜索"
          v-model="search"
          style="width: 200px;margin-right:15px"
          allowClear
          @search="onSearch"
        />
        <a-range-picker
          :ranges="{ 今日: [moment(), moment()], 本月: [moment(), moment().endOf('month')] }"
          show-time
          format="YYYY/MM/DD HH:mm:ss"
          @change="onChange"
        />
        <a-button type="dashed" style="margin:0 15px" @click="openmodal(2)">设置点券</a-button>
        <a-button type="primary" icon="plus" @click="openmodal(1)">充值点券</a-button>
      </div>
      <div class="integral_table">
        <a-table
          :columns="columns"
          :rowKey="integralList => integralList.id"
          :dataSource="integralList"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <div slot="url" slot-scope="row">
            <img :src="row.url" alt="" srcset="" style="width:120px" />
          </div>
          <!-- <div slot="active" slot-scope="row">
            <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delSource(row.id)">
              <span class="goodsurl quan">删</span>
            </a-popconfirm>
          </div> -->
        </a-table>
        <a-modal
          title="增加用户点券"
          :visible="visible"
          width="600px"
          :confirm-loading="confirmLoading"
          ok-text="确认"
          cancel-text="取消"
          @ok="openmodal2"
          @cancel="handleCancel"
        >
          <div class="display">
            <span class="title">用户手机号</span>
            <a-input placeholder="请输入用户手机号" v-model="form.phone" allowClear />
          </div>
          <div class="display">
            <span class="title">点券变更数额</span>
            <a-input placeholder="请输入点券变更数额" v-model="form.integral" allowClear />
          </div>
        </a-modal>
        <a-modal
          title="设置上单点券扣除数额"
          :visible="isset"
          width="600px"
          ok-text="确认"
          cancel-text="取消"
          @ok="dochange(2)"
          @cancel="handleCancel"
        >
          <div class="display">
            <span class="title" style="width:200px">上单点券扣除数额</span>
            <a-input placeholder="请输入上单点券扣除数额" v-model="form2.value" allowClear />
          </div>
        </a-modal>
        <a-modal
          title="确认操作"
          :visible="istrue"
          width="500px"
          ok-text="确认"
          cancel-text="取消"
          @ok="dochange(1)"
          @cancel="handleCancel2"
        >
          <div>
            您确认对用户:<span style="color:blue">{{ form.phone }}</span
            >进行<span style="color:red">增加{{ form.num }}</span
            >点券的操作吗?
          </div>
        </a-modal>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getIntegralList, addIntegralInfo, addSystemInfo, getSetInfo } from '@/api/integral'
import moment from 'moment'

export default {
  name: 'Integral',
  data () {
    return {
      moment,
      dateFormat: 'YYYY/MM/DD',
      start: '',
      end: '',
      search: '',
      isset: false,
      istrue: false,
      isadd: false,
      visible: false,
      confirmLoading: false,
      count: 0,
      columns: [
        {
          title: '用户手机号',
          align: 'center',
          dataIndex: 'phone',
          scopedSlots: {
            customRender: 'phone'
          }
        },
        {
          title: '用户昵称',
          align: 'center',
          dataIndex: 'nickname',
          scopedSlots: {
            customRender: 'nickname'
          }
        },
        {
          title: '添加前点券余额',
          align: 'center',
          dataIndex: 'before_integral',
          scopedSlots: {
            customRender: 'before_integral'
          }
        },
        {
          title: '添加的点券数量',
          align: 'center',
          dataIndex: 'integral',
          scopedSlots: {
            customRender: 'integral'
          }
        },
        {
          title: '添加后的点券余额',
          align: 'center',
          dataIndex: 'after_integral',
          scopedSlots: {
            customRender: 'after_integral'
          }
        },
        {
          title: '用户团队昵称',
          align: 'center',
          dataIndex: 'team_name',
          scopedSlots: {
            customRender: 'team_name'
          }
        },
        {
          title: '操作时间',
          align: 'center',
          dataIndex: 'create_at',
          scopedSlots: {
            customRender: 'create_at'
          }
        },
        {
          title: '操作人',
          align: 'center',
          dataIndex: 'add_user_phone',
          scopedSlots: {
            customRender: 'add_user_phone'
          }
        }
      ],
      pagination: {
        pageSize: 15,
        page: 1
      },
      loading: false,
      integralList: [],
      form2: {
        name: '上单扣除点券数量',
        field: 'top_price',
        value: ''
      },
      form: {
        phone: '',
        integral: ''
      }
    }
  },
  computed: {},
  created () {
    this.getIntegralList(1, 15)
  },
  mounted () {},
  watch: {},
  methods: {
    // 获取系统设置
    getSetInfo () {
    getSetInfo({
    field: 'top_price'
    })
    .then(res => {
    if (res.code === 200) {
    console.log('当前系统设置返回', res)
    this.form2.value = res.data.value
    } else {
    this.$message.info(res.msg)
    }
    })
    .catch(err => {
    console.log(err)
    })
    },

    onChange (dates, dateStrings) {
    //   console.log('From: ', dates[0], ', to: ', dates[1])
    //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      if (dateStrings[0] !== '' && dateStrings[1] !== '') {
        this.start = moment(dateStrings[0]).format('X')
        this.end = moment(dateStrings[1]).format('X')
        // console.log(this.start, this.end)
      } else {
        this.start = ''
        this.end = ''
      }
      this.getIntegralList(1, 15, this.search, this.start, this.end)
    },
    openmodal2 () {
      this.istrue = true
    },
    onSearch () {
      this.getIntegralList(1, 15, this.search, this.start, this.end)
    },
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.loading = true
      this.getIntegralList(params.page, 15, this.search, this.start, this.end)
    },
    handleCancel2 () {
      this.istrue = false
    },
    handleCancel () {
      this.visible = false
      this.isset = false
      this.form = {}
      this.form2 = {
           name: '上单扣除点券数量',
        field: 'top_price',
        value: ''
      }
    },
    openmodal (val) {
      if (val === 1) {
        this.visible = true
      } else {
        this.getSetInfo()
        this.isset = true
      }
    },
    dochange (val) {
      if (val === 1) {
        addIntegralInfo(this.form)
          .then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.istrue = false
              this.handleCancel()
              this.getIntegralList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        addSystemInfo(this.form2)
          .then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('设置成功!')
              this.handleCancel()
              this.getIntegralList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },

    // 获取操作列表
    getIntegralList (page, pagesize, search, start, end) {
      this.loading = true
      getIntegralList({
        page: page,
        pagesize: pagesize,
        phone: search,
        start: start,
        end: end
      })
        .then(res => {
          if (res.code === 200) {
            console.log('操作列表返回', res)
            //   this.count = res.data.count
            this.integralList = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          } else {
            this.$message.info(res.msg)
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: right;
  margin-bottom: 10px;

  .title {
    display: inline-block;
    width: 120px;
    margin-right: 10px;
  }

  .showimg_mian {
    display: flex;

    .anticon-play-circle {
      font-size: 67px;
    }

    .showimg {
      width: 200px;
      margin-right: 20px;

      /deep/.ant-upload {
        width: 200px;
        padding: 0px;
      }

      .nogoodsimg {
        text-align: center;

        .no_main {
          width: 150px;
          margin: 35px auto;

          .anticon-fund {
            font-size: 67px;
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .img_box {
      position: relative;
      color: white;

      img {
        width: 100%;
        height: 100%;
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 24px;
        cursor: pointer;
        display: none;
        transition: all 0.3s linear;
        color: red;
      }

      img:hover + .anticon-close-circle {
        display: block;
      }

      .anticon-close-circle:hover {
        display: block;
        transform: rotate(90deg);
      }
    }
  }
}

.integral_table {
  .goodsurl {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    margin-left: 10px;
    color: #000;
    font-size: 18px;
    // font-weight: bolder;
    text-align: center;
    border-radius: 50%;
    // padding: 5px;
    color: gray;
    cursor: pointer;
    border: 1px solid gray;
  }

  .ant-table-row:hover {
    .goodsurl {
      background-color: orange;
      color: #fff;
      // font-weight: bolder;
      border: none;
    }

    .quan {
      background-color: red;
    }
  }
}
</style>
